<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹幕系统</title>

    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/elementui.js"></script>
    <script src="./js/moment.min.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/danmu.css">
    <link rel="stylesheet" href="./css/review.css">
    <link rel="stylesheet" href="./css/elementui.css">
    <link rel="stylesheet" type="text/css" href="./css/toastr.min.css">
    <script type="text/javascript" src="./js/toastr.min.js"></script>
    <script type="text/javascript" src="./js/ThreeCanvas.js"></script>
    <script type="text/javascript" src="./js/Snow.js"></script>
</head>
<body onLoad="init()">
    <div id="pageBg">
        <div id="app">
           
        </div>
    </div>
    <script>
        //工具函数

        // 延时
        function awaitTime(sec){
            return new Promise((resolve,reject)=>{
                setTimeout(() => {
                    resolve();
                }, 1000*sec);
            })
        }

        // 请求封装 页面只需要get 所以简化$.ajax
        function Request(url){
            return new Promise((resolve,reject)=>{
                $.ajax({
                    url:url,
                    method:'GET',
                    contentType:'application/json',
                    success:function(res){
                        resolve(res);
                    },
                    error:function(err){
                        reject(err);
                    }
                })
            })
        }
        $(()=>{
            window.addEventListener('keydown',function(e){
                console.log(e);
            })
        })
    </script>
      
      <script>
            // 新弹幕
            let newdanmuarr = [];
            // 旧弹幕
            let olddanmuarr = [];
            // 是否启动
            let isstart = false;
            // 是否请求中
            let isrequesting = false;
            // 处理弹幕
            async function handledanmu(){
                // 如果正在请求中那么跳过这次处理
                if(!isrequesting){
                    // 判断是否有新弹幕
                    let hasnew = newdanmuarr.length>0;
                    //  判断渲染新的还是旧弹幕
                    let danmuarr = hasnew?newdanmuarr:olddanmuarr
                    if(danmuarr.length>0){
                        // 插入判断后的数组第一条弹幕
                        let item = danmuarr[0];
                        $('#app').append(`
                            <div style="top:${Math.random()*80}vh" class="danmu-container" id="${item.id}">
                                <div class="speech-bubble speech-bubble${item.style_type}"><div class="speech-bubble-txt">${item.content}</div></div>
                            </div>
                        `);
                        // 15秒后删除插入的这条弹幕
                        let removeid = danmuarr[0]['id'];
                        setTimeout(() => {
                            $(`#${removeid}`).remove();
                        }, 1000*15);

                        // 延时随机时间后删除判断后的数组的第一条
                        await awaitTime((Math.random()*2+0.5));
                        danmuarr.shift();
                    }
                }
                // 等待0.5s后执行下一次操作
                await awaitTime(0.5);
                handledanmu();
            }
            // 获取数据
            async function getData(){
                isrequesting = true;
                // 每次都请求新弹幕数据
                await getNew();// 里面有结果 拼接数组 然后去重
                //await  
                if(olddanmuarr.length<5){// 旧弹幕少于5条 重新取旧数组 然后拼接去重
                    await getOld();// 里面有结果 拼接数组 然后去重
                }

                // 如果没有启动 那么启动插入弹幕操作
                if(!isstart){
                    handledanmu();
                    isstart = true;
                }
                await awaitTime(0.5);
                isrequesting = false;
            }
            $(function(){
                // 进入页面 开始获取数据  然后定时10s 取一次
                getData();
                setInterval(()=>{
                    getData();
                },1000*10)
            })
            



             // 获取新弹幕
             async function getNew(){
                return new Promise(async (resolve,reject)=>{
                   Request('/api/danmuactive').then((data)=>{
                        let resnewdanmu = data;
                        newdanmuarr = newdanmuarr.concat(resnewdanmu)
                        // 去重
                        newdanmuarr = [...new Set(newdanmuarr)]
                        resolve();
                    })
                   
                   
                })
                
            }

            // 获取旧弹幕
            async function getOld(){
                return new Promise(async (resolve,reject)=>{
                    Request('/api/danmuactiveold').then((data)=>{
                        let resnewdanmu = data;
                        olddanmuarr = olddanmuarr.concat(resnewdanmu)
                        // 去重
                        olddanmuarr = [...new Set(olddanmuarr)]
                        resolve();
                    })
                    
                })
            }
           
    </script>
    
</body>
</html>